<template>
  <div class="audio-player" @touchmove.stop>
    <w-x-audio-player
      ref="audioPlayer"
      :URL="audioURL"
      :audioHeader="{
        URL: audioHeader
      }"
      :autoPlay="autoPlay"
      @durationchange="onDurationChange"
      @togglePlay="handleTogglePlay"
      @timeupdate="onTimeUpdate"
      @domReady="elm => $emit('initial', elm)"
    />

    <button
      class="audio-button"
      :class="{active: isPlaying}"
      @click="toggleAudioPlay"
    />

    <div
      class="audio-progress"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <div class="audio-progress-bar">
        <span class="bar" :style="{width: progressLength}"/>
      </div>

      <div class="audio-Info">
        <span>{{position | timeFormat}}</span>
        <span class="duration">{{duration | timeFormat}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  /*
   * 不带样式的音频控制组件
   */
  import WXAudioPlayer from "./WXAudioPlayer";

  export default {
    name: 'audio-player',

    components: {
      WXAudioPlayer
    },

    props: {
      audioURL: {
        type: String,
        'default': ''
      },
      audioHeader: {
        type: String
      },
      autoPlay: {
        type: Boolean,
        'default': false
      },
    },

    data() {
      return {
        position: 0,
        duration: 0,
        // 0暂停，1播放，2loading
        isPlaying: false,

        // 手指点击的初始
        touchStart: 0,
        // 进度条是否跟随手指移动
        readyToMove: false,
        // 手指按下时的进度条位置
        musicTime: '0',
        // 手指控制的进度条位置
        controlledProgress: 0,
      }
    },

    computed: {
      progressLength() {
        return (
          this.readyToMove ?
            this.controlledProgress :
            100 * (this.position / this.duration)
        ) + '%'
      },
    },

    filters: {
      timeFormat(value) {
        return Math.floor(value / 60).toString().padStart(2, '00') +
          ':' +
          Math.floor(value % 60).toString().padStart(2, '00')
      }
    },

    methods: {
      onDurationChange(duration) {
        this.duration = duration;
      },

      onTimeUpdate(currentTime) {
        this.position = currentTime
      },

      handleTogglePlay(isplay) {
        this.isPlaying = isplay;
        this.$emit(isplay ? 'play' : 'pause')
      },

      toggleAudioPlay() {
        this.$refs.audioPlayer.togglePlay()
          .catch(e => this.$vux.toast.text(e.message));
      },

      handleTouchStart(e) {
        const musicTime = 100 * (this.position / this.duration);

        Object.assign(this, {
          touchStart: e.touches[0].pageX,
          musicTime,
          controlledProgress: musicTime,
          readyToMove: true
        })
      },

      handleTouchMove(e) {
        if (this.readyToMove) {
          const {
            pageX: x
          } = e.touches[0];

          let controlledProgress = this.musicTime + (x - this.touchStart) / 4;

          if (controlledProgress < 0) {
            controlledProgress = 0;
          } else if (controlledProgress > 100) {
            controlledProgress = 100;
          }

          this.controlledProgress = controlledProgress
        }
      },

      handleTouchEnd() {
        if (this.duration) {
          this.$refs.audioPlayer.setProgress(this.controlledProgress)
        }
        this.readyToMove = false;
      },

      play() {
        this.$refs.audioPlayer.play(true)
          .catch(e => this.$vux.toast.text(e.message));
      },

      pause() {
        this.$refs.audioPlayer.pause(false)
          .catch(e => this.$vux.toast.text(e.message));
      }
    },
  }
</script>
